<template>
  <div class="content_r">
    <el-container>
      <el-aside width="270px" >
        <el-card style="min-height: 200px">
          <el-col :span="24">
            <el-text style="font-weight: bolder; color: #42b983">分 类</el-text>
          </el-col>
          <el-divider />
          <el-col :span="24">
            <el-tree
                style="max-width: 600px; --el-tree-node-hover-bg-color: #eafcf7; color: #409EFF"
                :data="data.treeData"
                :props=" {  label: 'title'}"
                @node-click="handleNodeClick"
            />
          </el-col>
        </el-card>
        <el-card style=" margin-top: 10px">
          <el-col :span="24">
            <el-text style="font-weight: bolder; color: #42b983">标 签</el-text>
          </el-col>
          <el-divider />
          <el-col :span="24">
            <el-tag
                v-for="tag in data.tags"
                :key="tag.id"
                style="margin-bottom: 5px; margin-left: 5px; cursor: pointer;"
                :type="tag.type"
                @click="taghandleClick(tag)"
                size="default"
                :effect="tag.id === data.selectedTag?'dark':'light'"
                round
            >
              {{tag.title}}
            </el-tag>
          </el-col>
        </el-card>
      </el-aside>
      <el-main  v-loading="data.loading">
        <el-tabs @tab-click="handleClick">
          <el-tab-pane :label="item" v-for="(item,index) in data.tabData" :key="index">
            <div style="height: auto" >
              <ul v-infinite-scroll="loadMoreData" infinite-scroll-disabled="false" infinite-scroll-distance="10" style="overflow: auto; max-height: 640px">
                <el-row :gutter="10"  style="margin-left: 0; margin-right: 0">
                  <el-col :span="6" v-for="item in data.contentData" :key="item.a">
                    <el-card style="height: 150px; width: 100%; margin-bottom: 10px" shadow="hover"   @click="handleCardClick(item)">
                      <div  style=" display: flex;
                      justify-content: space-between;
                      align-items: center;
                      padding: 2px;">
                        <span  style=" font-weight: bold;">{{item.title}}</span>
                        <span  style="
                  top: 8px;
                   right: 8px;
                   background-color: #f1c40f;
                   color: white;
                   padding: 2px 6px;
                   border-radius: 4px;">{{ item.salary }}</span>
                      </div>
                      <div style=" min-height: 50px; padding: 10px">
                        {{item.description}}
                      </div>
                      <div style="  display: flex; justify-content: space-between;  padding: 8px; border-top: 1px solid #ddd;">
                        <el-link type="danger"  @click.stop="handleCoverClick(item)">{{ item.cover }}</el-link>
                        <div>
                          <span v-if="item.location" style="margin-right:5px; color: rgb(69,69,72); background-color: rgba(234,234,234,0.59); padding: 5px; border-radius: 100px" >{{ item.location }}</span>
                          <span style="color: rgb(69,69,72); background-color: rgb(234,234,234); padding: 5px; border-radius: 100px">{{ item.education }}</span>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>







<script setup>


import {nextTick, onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {listApi as listClassificationList} from "@/api/classification";
import {listApi as listTagList} from "@/api/tag";
import {listApi as listThing} from "@/api/thing";

const data=reactive({
  contentData: [],
  treeData: [],
  tags: [],
  selectedTree: -1,
  selectedTag:-1,
  tabData: ['全部','最新', '最热', '推荐'],
  loading: false,
  pageNum: 1,
  pageSize: 16,
  total: 0,
})
const tagTypes = ['success', 'warning', 'danger'];
const lazyloading = (time) => {
  if (time===undefined){
    time=1000;
  }
  data.loading = true
  setTimeout(() => {
    data.loading = false;
  }, time);
}
const getThingList=(allData)=>{
  lazyloading(1000)
  listThing(allData).then(res=>{
    data.contentData = res.data.list
    console.log(data.contentData)
  })
}
const handleClick=async (tab) => {
  data.pageNum = 1;
  data.contentData = []; // 清空内容数据
  const clickedTabIndex = data.tabData.findIndex(item => item === tab.props.label);
  console.log(clickedTabIndex)
  ElMessage.info(`Clicked Tab Index: ${clickedTabIndex}`);
  let sort = (clickedTabIndex === 1 ? 'recent' : clickedTabIndex === 2 ? 'hot' : 'recommend')
  if (clickedTabIndex === 0) {
    data.selectedTree = -1;
    data.selectedTag = -1;
    getThingList({pageNum: 1, pageSize: 1000});

    return;
  }

  ElMessage.info(sort);
  const sortData = {sort: sort};
  if (data.selectedTag !== -1) {
    sortData['tag'] = data.selectedTag;
  }
  sortData['classification'] = data.selectedTree;
  sortData['pageNum'] = 1;
  sortData['pageSize'] = 1000;
  console.log(sortData)
  getThingList(sortData);

}

const loadMoreData = async () => {
  console.log('loadMoreData')
  data.pageNum += 1;
  if ( data.contentData.length === data.total){
    return;
  }
  const response = await listThing({
    pageNum: data.pageNum,
    pageSize: data.pageSize,
    classificationId: data.selectedTree,
    tagId: data.selectedTag,
  });
  console.log(response)
  data.contentData = [...data.contentData,  ...response.data.list];
};

onMounted(async () => {
  await initSider();
  await initthinglist();
})
const initthinglist=()=>{
  data.pageNum = 1; // 重置分页
  lazyloading(1000)
  listThing({
    pageNum: data.pageNum,
    pageSize: data.pageSize,
  }).then(res => {
    data.contentData = res.data.list;
    data.total = res.data.total;
    console.log(data.contentData)
    console.log(data.total)
  })

}
const initSider = () => {
  data.treeData.push({key:'-1', title:'全部'})
  listClassificationList().then(res => {
    res.data.list.forEach(item=>{
      item.key = item.id
      data.treeData.push(item)
    })
  })
  listTagList().then(res => {
    data.tags = res.data.list.map((tag, index) => ({
      ...tag,
      type: tagTypes[Math.floor(Math.random()*index*88888) % tagTypes.length], // 循环分配类型
    }))
  });
}
const handleNodeClick = (node) => {
  data.selectedTree = node.key;
  data.pageNum = 1;
  data.contentData = []; // 清空内容数据
  ElMessage.success(data.selectedTree.toString());
  const sortData = {
    classification: data.selectedTree,
    pageNum: 1,
    pageSize: 16,
  };
  if (data.selectedTag !== -1) {
    sortData['tag'] = data.selectedTag;
  }
  getThingList(sortData);
}


const taghandleClick=(tag)=>{
  if (data.selectedTag===tag.id){
    data.selectedTag=-1;
    ElMessage.success(data.selectedTag.toString())
    return;
  }else{
    data.selectedTag=tag.id;
  }
  ElMessage.success(data.selectedTag !== -1 ? data.selectedTag.toString() : "取消选中");
}



const handleCoverClick=(item)=>{
  ElMessage.success(item.cover)
}

const handleCardClick=(item)=>{
  ElMessage.info(item.title);
}
</script>



<style scoped>
.selected-category-item {
  /* 这里添加你想要的样式，比如改变背景色或文字颜色 */
  background-color: rgba(0, 0, 0, .1);
  color: #42b983;
}
</style>